
<template>
    <main-layout>
        <div class="box">
            <!-- 头部购物车 -->
            <div class="head">
                <p>购物车</p>
            </div>

            <!-- 商品卡片区大容器 -->
            <div class="goods" v-if="cart.length">
                <!-- 每个小卡片 -->
                <!-- <div class="card" v-for="it in cart" :key="it.id">
                    <div>
                        <van-checkbox v-model="it.checked" checked-color="#ee0a24" style="color: #333; font-size: 14px">WUWULING</van-checkbox>
                    </div>
                    <van-card :num="it.amount" :price="it.price" desc="描述信息" :title="it.title" :thumb="it.image">
                        <template #footer>
                            <van-button size="mini" v-on:click.native="btnEvt('minus', it)">-</van-button>
                            <van-button size="mini" @click="btnEvt('add', it)">+</van-button>
                        </template>
                    </van-card>
                </div> -->
                 <van-swipe-cell
                    v-for="product in cart"
                    :key="product.id"
                >
                    <van-card
                    :price="product.price"
                    :title="product.title"
                    class="goods-card"
                    >
                        <template #thumb>
                            <div class="custom-thumb">
                            <van-checkbox
                                checked-color="#ee0a24"
                                icon-size="18px"
                                :value="product.checked"
                                @click="modifyChecked({id: product.id})"
                            ></van-checkbox>
                            <div class="van-image" style="width: 80%; height: 100%;">
                                <img :src="product.image" class="van-image__img" style="object-fit: cover;">
                            </div>
                            </div>
                        </template>
                        <template #num>
                            <van-stepper
                            :value="product.amount"
                            theme="round"
                            button-size="18"
                            @change="handleChange(product.id, $event)"
                            />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button
                            square
                            text="删除"
                            type="danger"
                            class="delete-button"
                            @click="handleRemove(product.id)"
                        />
                    </template>
                </van-swipe-cell>
            </div>

            <!-- 购物车为空 -->
            <van-empty v-else class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="购物车为空哟，快点去选购吧"/>

            <!-- 结算组件 -->
            <div class="acount">
                 <div class="l">
                        <van-checkbox :value="allChecked" @click="modifyAllChecked({allChecked: !allChecked})" checked-color="#ee0a24" style="color: #515151; font-size: 16px">全选</van-checkbox>
                 </div>
                 <div class="r">
                     <p>合计：<span>￥{{totalMoney}}</span></p>
                     <button @click="accountEvt">结&nbsp;&nbsp;算({{totalAmount}})件</button>
                 </div>
            </div>
        </div>
    </main-layout>

</template>

<script>
import { mapMutations, mapGetters } from 'vuex'

export default ({
  data () {
    return {
    //   all: false,
      list: []
    }
  },
  computed: {
    cart () {
      return this.$store.state.cartModule.cart
    },
    ...mapGetters('cartModule', ['allChecked', 'totalMoney', 'totalAmount'])
  },
  methods: {
    ...mapMutations('cartModule', ['removeFromCart', 'modifyAmount', 'modifyChecked', 'modifyAllChecked']),
    // 删除
    handleRemove (id) {
      // this.$store.commit('cartModule/removeFromCart', { id })
      this.removeFromCart({ id })
    },
    // 修改商品数量
    handleChange (id, value) {
      // this.$store.commit('cartModule/modifyAmount', { id, amount: value })
      this.modifyAmount({ id, amount: value })
    },
    accountEvt() {
        this.$router.push('/cartacc')
    }
  }
})
</script>

<style lang="less" scoped>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        height: 100%;
        position: relative;

        .head {
            width: 100%;
            height: 80px;
            background-color: rgba(193, 171, 150, 1);
            padding: 30px;
            box-sizing: border-box;

            p {
                color: #fff;
                font-weight: 800;
                font-size: 20px;

            }
        }

        .goods {
            display: flex;
            flex-direction: column;
            min-width: 380px;
            flex: 1;

            .card {
                flex: 1;
                flex-wrap: wrap;
                padding: 10px;

            }

        }

        .acount {
            position: fixed;
            bottom: 50px;
            left: 0;
            display: flex;
            width: 100%;
            min-width: 340px;
            height: 50px;
            padding: 10px 20px;
            box-sizing: border-box;
            background-color: #fff;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;

            .l {
                // height: 50px;
                flex: 1;
                line-height: 50px;

            }

            .r {
                display: flex;
                // height: 50px;
                // line-height: 50px;
                flex: 1;
                // background-color: rgb(110, 11, 223);

                p {
                    width: 120px;
                    margin: 0;
                    flex: 1;
                    font-size: 14px;

                    span {
                        color: #d1082a;
                    }
                }
                button {
                    width: 120px;
                    flex: 1;
                    border: 0;
                    font-size: 14px;
                    color: #fff;
                    border-radius: 10px;
                    background-color: rgba(223, 71, 11, 0.849);

                }
            }
        }

    }
     .goods-card {
        margin: 0;
        background-color: #fff;
    }

    .delete-button {
        height: 100%;
    }

    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }

    /deep/.van-card__thumb {
        width: 120px;
    }
    .custom-thumb {
        display: flex;
        justify-content: space-between;
    }
    /deep/.van-submit-bar__button {
        width: 120px;
  }

</style>
